<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <div class="top">
      <span class="title">四川聚选科技有限公司</span>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="首页" name="first">
          <indexItem></indexItem>
        </el-tab-pane>
        <el-tab-pane label="关于我们" name="second">
          <about></about>
        </el-tab-pane>
        <el-tab-pane label="新闻动态" name="third">
          <news></news>
        </el-tab-pane>
      </el-tabs>
        <img class="callPhone" src="../assets/index/组 2.png" alt />
    </div>
  </div>
</template>

<script>
import indexItem from "./index/index";
import about from "./about/aboutus";
import news from "./news/news";

export default {
  name: "index",
  components: {
    indexItem,
    about,
    news
  },
  data() {
    return {
      activeName: "first"
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.el-tabs__active-bar {
    bottom: -6px;
    left: 0;
    height: 10px;
    background-color: #ff7200;
}
/deep/.el-tabs__nav-wrap {
  margin-left: 52px;
  height: 145px;
  bottom: 0px;
}
/deep/.el-tabs__item.is-active {
  color: #ff7200;
  font-weight: normal;
}
/deep/.el-tabs__item {
  font-size: 24px;
  font-weight: normal;
}
/deep/.el-tabs__nav-wrap::after {
  height: 0px;
  background-color: none;
}
/deep/.el-tabs {
  width: 100%;
}
/deep/.el-tabs__header {
  margin: 0;
  display: flex;
  justify-content: center;
}
a {
  font-size: 24px;
}
.callPhone {
  width: 235px;
  height: 50px;
}
.home {
  // position: relative;
  height: 100%;
  .top {
    width: 100%;
    height: 1rem;
    // line-height: 115px;
    line-height: 1rem;
    display: flex;
    justify-content: center;
    position: relative;
    .title {
      font-size: 0.4rem;
      font-weight: 500;
      position: absolute;
      top: 0.25rem;
      left: 13%;
    }
   img {
      display: flex;
      align-items: center;
      position: absolute;
      top: 0.5rem;
      right: 14%;
    }
  }
}
</style>